<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: lightyellow">
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
    var data_list = {{ data|safe }}
            $(function () {
                $('#container').highcharts({
                    chart: {
                        zoomType: 'xy',
                        backgroundColor: 'rgba(255, 255, 255, 0)',
                        plotBorderColor: null,
                        plotBackgroundImage: null,
                        borderWidth: 0
                    },
                    title: {
                        text: '用户注册和PV,UV'
                    },
                    subtitle: {
                        text: ' '
                    },
                    xAxis: [{
                        categories: data_list[0].reverse(),//['一月', '二月', '三月', '四月', '五月', '六月',
                        //'七月', '八月', '九月', '十月', '十一月', '十二月'],
                        crosshair: true
                    }],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: ' ',
                            style: {
                                color: Highcharts.getOptions().colors[2]
                            }
                        },
                        title: {
                            text: ' uv',
                            style: {
                                color: Highcharts.getOptions().colors[2]
                            }
                        },
                        opposite: true
                    }, { // Secondary yAxis
                        gridLineWidth: 0,
                        title: {
                            text: '注册',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        labels: {
                            format: '{value} 人',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        }
                    }, { // Tertiary yAxis
                        gridLineWidth: 0,
                        title: {
                            text: 'pvuv',
                            style: {
                                color: Highcharts.getOptions().colors[1]
                            }
                        },
                        labels: {
                            format: '{value} ',
                            style: {
                                color: Highcharts.getOptions().colors[1]
                            }
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'left',
                        x: 80,
                        verticalAlign: 'top',
                        y: 55,
                        floating: true,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                    },
                    series: [{
                        name: '注册量',
                        type: 'column',
                        yAxis: 1,
                        data: data_list[1].reverse(),//[49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                        tooltip: {
                            valueSuffix: '  人'
                        }
                    },


                        {
                            name: 'pv',
                            type: 'spline',
                            yAxis: 2,
                            data: data_list[2].reverse(),//[1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
                            marker: {
                                enabled: false
                            },
                            dashStyle: 'shortdot',
                            tooltip: {
                                valueSuffix: '  '
                            }
                        }, {
                            name: 'uv',
                            type: 'spline',
                            data: data_list[3].reverse(),//[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                            tooltip: {
                                valueSuffix: '  '
                            }
                        },
                        {
                            name: 'ip',
                            type: 'spline',
                            data: data_list[4].reverse(),//[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                            tooltip: {
                                valueSuffix: '  '
                            }
                        },


                    ]
                });
            });

    $(function () {
        $('#container1').highcharts({
            chart: {
                zoomType: 'xy',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                plotBorderColor: null,
                plotBackgroundImage: null,
                borderWidth: 0
            },
            title: {
                text: '支付订单数和金额'
            },
            subtitle: {
                text: '数据来源：商城'
            },
            xAxis: [{
                categories: data_list[0],//["20:45", "20:40", "20:35", "20:30", "20:25", "20:20", "20:15", "20:10", "20:05", "20:00", "19:55", "19:50", "19:45", "19:40", "19:35", "19:30", "19:25", "19:20", "19:15", "19:10", "19:05", "19:00", "18:55", "18:50", "18:45", "18:40", "18:35", "18:30", "18:25", "18:20", "18:15", "18:10", "18:05", "18:00", "17:55", "17:50", "17:45", "17:40", "17:35", "17:30", "17:25", "17:20", "17:15", "17:10", "17:05", "17:00", "16:55", "16:50", "16:45", "16:40", "16:35", "16:30", "16:25", "16:20", "16:15", "16:10", "16:05", "16:00", "15:55", "15:50", "15:45", "15:40", "15:35", "15:30", "15:25", "15:20", "15:15", "15:10", "15:05", "15:00", "14:55", "14:50", "14:45", "14:40", "14:35", "14:30", "14:25", "14:20", "14:15", "14:10", "14:05", "14:00", "13:55", "13:50", "13:45", "13:40", "13:35", "13:30", "13:25", "13:20",],
                crosshair: true
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}笔',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: '交易订单数',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: '交易金额',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value} 元',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 120,
                verticalAlign: 'top',
                y: 100,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            series: [{
                name: '支付金额',
                type: 'column',
                yAxis: 1,
                data: data_list[6].reverse(),//[3423.46, 2058.73, 3947.55, 8290.63, 947.14, 732.05, 11232.03, 33684.38, 17491.36, 5913.19, 9160.29, 30944.1, 1638.03, 3579.51, 8027.01, 13399.7, 95383.16, 15604.87, 32213.37, 17878.31, 4132.26, 3436.61, 13327.04, 5118.44, 1038.79, 3677.86, 1826.81, 2008.61, 10475.87, 5671.17, 2324.35, 7549.6, 6872.46, 20362.6, 4895.33, 1320.54, 2749.35, 1535.32, 942.01, 3723.17, 205859.2, 2993.65, 7093.68, 206984.88, 5720.5, 2679.55, 13545.13, 9238.16, 124247.85, 7156.66, 11690.4, 128244.45, 78115.27, 70261.14, 96190.41, 70670.95, 325381.22, 139382.77, 73192.46, 275250.69, 64469.19, 488399.5, 287452.12, 864728.31, 441874.75, 246587.2, 248856.52, 54614.13, 37943.42, 55739.86, 310091.84, 106350.28, 388852.16, 153628.91, 124819.75, 51391.11, 328306.59, 217681.91, 242103.22, 53465.78, 104797.51, 70322.71, 50879.9, 657722.06, 606830.0, 144265.84, 320459.25, 378776.16, 339579.84, 482089.53,],
                tooltip: {
                    valueSuffix: ' 元'
                }
            }, {
                name: '支付订单数',
                type: 'spline',
                data: data_list[5].reverse(),//[11, 4, 12, 9, 4, 4, 14, 24, 20, 22, 21, 15, 9, 12, 24, 22, 15, 5, 21, 8, 13, 10, 16, 22, 6, 13, 8, 7, 11, 20, 6, 14, 10, 45, 11, 5, 9, 6, 4, 11, 13, 12, 16, 13, 17, 14, 12, 13, 16, 25, 35, 143, 203, 242, 198, 200, 188, 186, 179, 209, 228, 224, 243, 191, 158, 164, 161, 182, 147, 150, 173, 164, 152, 138, 159, 158, 149, 158, 189, 180, 192, 199, 181, 182, 183, 227, 256, 266, 296, 282,],
                tooltip: {
                    valueSuffix: '笔'
                }
            }]
        });
    });

</script>
<div id="container" style="min-width:400px;height:850px"></div>

<div id="container1" style="min-width:400px;height:850px"></div>
</body>
</html>